<!--
 * @Descripttion: 菜单
 * @version: 
 * @Author: 
 * @Date: 2022-04-25 11:40:02
 * @LastEditors: weidelong
 * @LastEditTime: 2022-04-25 18:45:58
-->
<template>  
    <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
        @open="handleOpen"
        @close="handleClose">
        <menutree :data="navList"></menutree>
    </el-menu>
</template>

<script>
    import menutree from '../public/menuTree.vue'
    
    export default {
        name: 'Nav',
        components: {menutree},
        data() {
            return {
                // 0: 医师, 1: 普通管理员, index: admin 超级管理员admin
                navList: [
                    {
                        path: '/home/index',
                        title: '首页',
                        icon: 'HomeFilled',
                    },
                    {
                        path: '/home/manage/audit',
                        title: '文章管理',
                        index: '1',
                        icon: 'List',
                    },
                    {
                        path: '/home/manage/myArticle',
                        title: '我的文章',
                        permission: '0',
                        icon: 'List',
                    },
                    {
                        path: '/home/message',
                        title: '我的咨询',
                        icon: 'Promotion',
                        permission: '0'
                    },
                    {
                        path: '/home/userMage/doctorMage',
                        title: '医师管理',
                        index: '1',
                        icon: 'HelpFilled',
                    },
                    {
                        path: '/home/userMage/mobileUser',
                        title: '用户管理',
                        icon: 'UserFilled',
                        index: '1',
                    },
                    {
                        path: '/home/userMage/userMage',
                        title: '管理员管理',
                        index: 'admin',
                        icon: 'Management',
                    },
                ],
                arr1: []
            }
        },
        created() {
            this.fil()
        },
        methods: {
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            // 处理权限菜单，拥有权标识的用户才会显示该对应权限菜单
            fil() {
                let identity = localStorage.getItem('identity')
                let name = localStorage.getItem('username')
                if (identity === 'doctor') {
                    const fn = (arr) => {
                        for (let i = 0; i < arr.length; i ++) {
                            if (arr[i].index == '1' || arr[i].index == 'admin') {
                                arr.splice(i, 1)
                                i --
                            }
                            else if (arr[i].children) {
                                fn(arr[i].children)
                            } 
                            // else
                            // {
                            //     if (arr[i].index && arr[i].index === 'admin') {
                            //         arr.splice(i, 1)
                            //         console.log(arr[i])
                            //         i -- //i需要自减，否则每次删除都会讲原数组索引发生变化
                            //     }
                            // }
                        }
                    }
                    fn(this.navList)
                } else if (identity === 'manager' && name !== 'admin') {
                    const fn = (arr) => {
                        for (let i = 0; i < arr.length; i ++) {
                            if (arr[i].index === 'admin' || arr[i].permission === '0') {
                                arr.splice(i, 1)
                                i --
                            }
                            else if (arr[i].children) {
                                fn(arr[i].children)
                            } 
                        }
                    }
                    fn(this.navList)
                } else if (identity === 'manager' && name == 'admin') {
                    const fn = (arr) => {
                        for (let i = 0; i < arr.length; i ++) {
                            if (arr[i].permission === '0') {
                                arr.splice(i, 1)
                                i --
                            }
                            else if (arr[i].children) {
                                fn(arr[i].children)
                            } 
                        }
                    }
                    fn(this.navList)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 280px;
            height: 100%;
        }

        .el-menu {
            .el-menu-item {
                width: 100%;
            }

            .is-active {
                background: #dfedfe !important;
                color: #666;
            }
        }
</style>
